<template>
  <div class="goods">
    <div class="left-menu" ref="menuWrapper">
      <ul class="list-menu">
        <li @click="clickMenu(index,$event)" class="item-menu" v-for="(menu,index) in goods" :class="{ 'highLight':currentIndex === index}">
          <div class="table-div">
            <div class="row-div">
              <span class="text"><span v-show="menu.type>0" class="icon" :class="classMap[menu.type]"></span>{{menu.name}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="right-content" ref="foodsWrapper">
      <ul class="list-content">
        <li v-for="menu in goods" class="item-content food-list-hook">
          <div class="menu-name" >{{menu.name}}</div>
          <ul>
            <li @click="showFoodDetail(food,$event)"  v-for="food in menu.foods" class="item-food">
              <div class="food-avatar-wrapper">
                <img :src="food.icon" alt="food.icon" width="57" height="57">
              </div>
              <div class="food-info-wrapper">
                <div class="food-name">{{food.name}}</div>
                <div class="food-desc">{{food.description}}</div>
                <div class="food-sell-rating"><span class="sellCount">月售{{food.sellCount}}份</span><span class="ratingRate">好评率{{food.rating}}%</span></div>
                <div class="food-price"><span class="nowPrice">￥{{food.price}}</span><span v-show="food.oldPrice" class="oldPrice">￥{{food.oldPrice}}</span></div>
              </div>
              <div class="cartcontrol-wrapper"><cartcontrol :food="food" ></cartcontrol></div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="shopcart-wrapper">
      <shopcart :selectedFoods="selectedFoods" :minPrice="seller.minPrice" :deliveryPrice="seller.deliveryPrice"></shopcart>
    </div>
    <div class="food-detail-wrapper">
      <food-detail :food="clickFood" ref="r_food"></food-detail>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import shopcart from '../shopcart/shopcart.vue'
  import cartcontrol from '../cartcontrol/cartcontrol.vue'
  import foodDetail from '../foodDetail/foodDetail.vue'
  import BScroll from 'better-scroll'
  import IScroll from 'iscroll/build/iscroll-probe.js'
//  import IScroll from 'iscroll'

  export default{
    props:{
      seller:{
        type: Object
      }
    },
    components:{
      shopcart,
      cartcontrol,
      foodDetail
    },
    data() {
      return{
        goods:[],
        clickFood:{},
        menuScroll:{},
        foodsScroll:{},
        scrollY: 0,
        listHeight: [],
        foodListHookArr: [],
        classMap:['decrease','discount','special','invoice','guarantee']
      }
    },
    computed:{
      currentIndex() {
        for (let i=0; i<this.listHeight.length; i++){
          if( !this.listHeight[i+1] || (this.scrollY >= this.listHeight[i] && this.scrollY < this.listHeight[i+1])){
            return i;
          }
        }
        return 0;
      },
      selectedFoods() {
        let arr = [];
        this.goods.forEach( (menu) => {
          menu.foods.forEach( (food) => {
            if(food.count > 0){
              arr.push( food );
            }
          })
        });
        return arr;
      }
    },
    methods:{
      clickMenu(index,event){
        console.log('event._constructed:  '+event._constructed);
        if (!event._constructed) {    //不会处理浏览器派发的事件，只处理iscroll插件派发的事件
          return;
        }
        this.currentIndex = index;
        this.foodsScroll.scrollToElement(this.foodListHookArr[index], 300);
      },
      showFoodDetail(food,event) {
        console.log('event._constructed:  '+event._constructed);
        if(!event._constructed){
          return ;
        }
        this.clickFood = food;
        this.$refs.r_food.show();
      },
      _initScroll() {
        this.menuScroll = new IScroll(this.$refs.menuWrapper,{
          click:true,
          mouseWheel:true
        });

        this.foodsScroll = new IScroll(this.$refs.foodsWrapper,{
          mouseWheel:true,
          click:true,
          probeType: 3
        });
//        this.foodsScroll.on('scroll', function () {
//          this.scrollY = Math.abs(Math.round(this.y));    //如果是传统的function,则this指的是this.foodsScroll
//          console.log('pos.y:'+this.y);
//        });
        this.foodsScroll.on('scroll', () =>{
          this.scrollY = Math.abs(Math.round(this.foodsScroll.y));
          //但在箭头函数里，this指的是当前vue实例对象
//          console.log('pos.y:'+this.scrollY);
        });
      },
      _caculateHeightsOfRightItem() {
        let height = 0;
        let foodListHook = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
        this.foodListHookArr = Array.from(foodListHook);
        this.listHeight.push(height);

        Array.from(foodListHook).forEach((oneList) => {
          height += oneList.offsetHeight;
          this.listHeight.push(height);
        });
        console.log(this.listHeight);
      }
    },

    created() {
      this.$http.get('api/goods').then((res) => {
        res = res.data;
        if (res.errno == 0){
          this.goods = res.data;
          this.$nextTick(() => {
            this._initScroll();
            this._caculateHeightsOfRightItem();
          });
        }
      });
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../common/mixin";

  .goods{
    display: flex;
    position: absolute;
    top: 174px;
    bottom: 48px;
    width: 100%;
    overflow: hidden;
    .left-menu{
      flex: 0 0 80px;
      background-color: #f3f5f7;
      box-sizing: border-box;
      .list-menu{
        .item-menu{
          padding: 0 12px;
          height: 54px;
          width: 100%;
          box-sizing: border-box;
          .table-div{
            display: table;
            width: 100%;
            height: 100%;
            @include border-1px(rgba(7,17,27,0.1));
            .row-div{
              height: 100%;
              display: table-row;
            }
            .icon{
              display: inline-block;
              width: 12px;
              height: 12px;
              background-size: 12px 12px;
              margin-right: 2px;
            }
            .icon.decrease{
              @include  bg_image('decrease_3');
            }
            .icon.discount{
              @include  bg_image('discount_3');
            }
            .icon.guarantee{
              @include  bg_image('guarantee_3');
            }
            .icon.invoice{
              @include  bg_image('invoice_3');
            }
            .icon.special{
              @include  bg_image('special_3');
            }
            .text{
              display: table-cell;
              vertical-align: middle;
              font-size: 12px;
              font-weight: 200;
              line-height: 14px;
              /*<!--@include border-1px(rgba(7,17,27,0.1));-->*/
            }
          }
        }
      }
    }
    .right-content{
      flex:1;
      .list-content{
        .item-content{
          .menu-name{
            height: 26px;
            background-color: #f3f5f7;
            line-height: 26px;
            font-size: 12px;
            color: rgb(147,153,159);
            border-left: 2px solid #d9dde1;
            padding-left: 14px;
          }
          .item-food{
            position: relative;
            display: flex;
            margin: 0 18px;
            padding: 18px 0;
            font-size: 0;
            @include border-1px(rgba(7,17,27,0.1));
            .food-avatar-wrapper{
              /*display: inline-block;*/
              flex: 0 0 57px;
            }
            .food-info-wrapper{
              /*display: inline-block;*/
              flex: 1;
              margin-left: 10px;
              vertical-align: top;
              .food-name{
                font-size: 14px;
                color: rgb(7,17,27);
                line-height: 14px;
              }
              .food-desc{
                font-size: 10px;
                color: rgb(147,153,159);
                line-height: 13px;
                margin: 8px 0;
              }
              .food-sell-rating{
                font-size: 10px;
                color: rgb(147,153,159);
                line-height: 10px;
                .ratingRate{
                  margin-left: 12px;
                }
              }
              .food-price{
                .nowPrice{
                  font-size: 14px;
                  line-height: 24px;
                  color:rgb(240,20,20) ;
                  font-weight: 700;
                }
                .oldPrice{
                  font-size: 10px;
                  color: rgb(147,153,159);
                  font-weight: 700;
                  line-height: 24px;
                  text-decoration: line-through;
                  margin-left: 8px;
                }
              }
            }
            .cartcontrol-wrapper{
              position: absolute;
              right: 0;
              bottom: 18px;
            }
          }
        }
      }
    }
    .highLight{
      margin-top: -1px;
      background-color: #ffffff;
      @include border-1px(#ffffff);
    }
  }

</style>
